import React from 'react';
import { Button, Modal, DatePicker, Menu } from "antd";
import MyEchart from '../components/myEchart';
import jQuery, { type } from 'jquery';
import ReactEcharts from 'echarts-for-react';
import moduleNavImg from "../imgs/ksh33.png";

const globalConfig = require("../js/globalConfig");
const globalOption = require("../js/optionConfig");
const utils = require("../js/utils");

//当前电度组件
class NowElec extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: this.props.flag,
            url: globalConfig.url + "/getElec",
            option: {
                xAxis: [{ name: "小时(h)" }],
                series: [
                    {
                        symbol: "circle",
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#91cc75',
                                lineStyle: { color: '#91cc75' }
                            }
                        }
                    }
                ]
            }
        }
    }

    updateChart(chartInstance) {
        var this_ = this;
        jQuery.ajax({
            url: this_.state.url,
            dataType: "JSON",
            type: "POST",
            data: {},
            success: function (result) {
                let data = this_.state.flag ? result.mainData : result.subData;
                let xData = [];
                let yData = new Array(24).fill(0);
                let hour = new Date().getHours();
                for (let i = 0; i < 24; i++) {
                    var time = hour - (23 - i);
                    time = time >= 0 ? time : 24 + time;
                    xData.push(utils.formatData(time));
                }
                yData = utils.upDateData(data, xData, yData);
                utils.setOption(chartInstance, xData, yData);
            }
        });
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.flag == nextProps.flag)
            return false;
        this.setState({ flag: nextProps.flag })
        let instance = this.echartsReact.getEchartsInstance();
        this.updateChart(instance);
        return true;
    }

    componentDidMount() {
        let instance = this.echartsReact.getEchartsInstance();

        //设置二级页面通用配置
        instance.setOption(globalOption.options.secPageOption);
        //设置电度配置
        instance.setOption(globalOption.options.elecPageOption);
        //设置本例特性配置
        instance.setOption(this.state.option);

        this.timerID = setInterval(() => {
            this.updateChart(instance);
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={globalOption.options.baseOption} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}

//当日电度组件
class TodayElec extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: this.props.flag,
            url: globalConfig.url + "/getTodayElec",
            option: {
                xAxis: [{ name: "小时(h)" }],
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#91cc75',
                                lineStyle: { color: '#91cc75' }
                            }
                        }
                    }
                ]
            }
        }
    }

    updateChart(chartInstance) {
        var this_ = this;
        jQuery.ajax({
            url: this_.state.url,
            dataType: "JSON",
            type: "POST",
            data: {},
            success: function (result) {
                let data = this_.state.flag ? result.mainData : result.subData;
                let xData = [];
                let yData = [];
                var hour = new Date().getHours();
                for (var i = 0; i < hour; i++) {
                    xData.push(utils.formatData(i));
                    yData.push(0);
                }
                yData = utils.upDateData(data, xData, yData);
                utils.setOption(chartInstance, xData, yData);
            }
        });
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.flag == nextProps.flag)
            return false;
        this.setState({ flag: nextProps.flag })
        let instance = this.echartsReact.getEchartsInstance();
        this.updateChart(instance);
        return true;
    }

    componentDidMount() {
        let instance = this.echartsReact.getEchartsInstance();

        //设置二级页面通用配置
        instance.setOption(globalOption.options.secPageOption);
        //设置电度配置
        instance.setOption(globalOption.options.elecPageOption);
        //设置本例特性配置
        instance.setOption(this.state.option);

        this.updateChart(instance);
    }

    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={globalOption.options.baseOption} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}

class MonthElec extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: this.props.flag,
            url: globalConfig.url + "/getMonthElec",
            option: {
                xAxis: [{ name: "日(d)" }],
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#91cc75',
                                lineStyle: { color: '#91cc75' }
                            }
                        }
                    }
                ]
            }
        }
    }

    updateChart(chartInstance) {
        var this_ = this;
        jQuery.ajax({
            url: this_.state.url,
            dataType: "JSON",
            type: "POST",
            data: {},
            success: function (result) {
                let data = this_.state.flag ? result.mainData : result.subData;
                let xData = [];
                let yData = [];
                var day = new Date().getDate();
                for (var i = 0; i < day; i++) {
                    xData.push(utils.formatData(i));
                    yData.push(0);
                }
                yData = utils.upDateData(data, xData, yData);
                utils.setOption(chartInstance, xData, yData);
            }
        });
    }

    componentDidMount() {
        let instance = this.echartsReact.getEchartsInstance();

        //设置二级页面通用配置
        instance.setOption(globalOption.options.secPageOption);
        //设置电度配置
        instance.setOption(globalOption.options.elecPageOption);
        //设置本例特性配置
        instance.setOption(this.state.option);

        this.updateChart(instance);
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.flag == nextProps.flag)
            return false;
        this.setState({ flag: nextProps.flag })
        let instance = this.echartsReact.getEchartsInstance();
        this.updateChart(instance);
        return true;
    }

    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={globalOption.options.baseOption} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}

class DaySelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url: globalConfig.url + "/daySelect",
            option: {
                xAxis: [{ name: "小时(h)" }],
                yAxis: [{ name: "电度(kW·h)" }],
                series: [
                    {
                        name: "电度",
                        type: 'bar'
                    },
                ]
            }
        };
    }

    updateChart(flag, url, beginDate, chartInstance) {
        jQuery.ajax({
            url: url,
            dataType: "JSON",
            type: "POST",
            data: {
                date: beginDate
            },
            success: function (result) {
                var data = flag ? result.mainData : result.subData;
                var xData = [];
                var yData = new Array(24).fill(0);
                for (var i = 0; i < 24; i++)
                    xData.push(utils.formatData(i));
                yData = utils.upDateData_2(data, xData, yData);
                utils.setOption(chartInstance, xData, yData);
            }
        });
    }

    shouldComponentUpdate(nextProps, nextState) {
        this.updateChart(nextProps.flag, this.state.url, nextProps.beginDate, this.echartsReact.getEchartsInstance());
        return true;
    }

    componentDidMount() {
        let instance = this.echartsReact.getEchartsInstance();
        instance.setOption(this.state.option);
        this.updateChart(this.props.flag, this.state.url, this.props.beginDate, instance);
    }

    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={globalOption.options.modelOption} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}

class MonthSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url: globalConfig.url + "/monthSelect",
            option: {
                xAxis: [{ name: "日(d)" }],
                yAxis: [{ name: "电度(kW·h)" }],
                series: [
                    {
                        name: "电度",
                        type: 'bar'
                    },
                ]
            }
        };
    }

    updateChart(flag, url, beginDate, chartInstance) {
        jQuery.ajax({
            url: url,
            dataType: "JSON",
            type: "POST",
            data: {
                date: beginDate
            },
            success: function (result) {
                let data = flag ? result.mainData : result.subData;;;;
                let dateStr = beginDate;
                let days = new Date(dateStr.slice(0, 4), dateStr.slice(5, 7), 0).getDate();
                var xData = [];
                var yData = new Array(days).fill(0);
                for (var i = 1; i <= days; i++)
                    xData.push(utils.formatData(i));
                yData = utils.upDateData_2(data, xData, yData);
                utils.setOption(chartInstance, xData, yData);
            }
        });
    }

    shouldComponentUpdate(nextProps, nextState) {
        this.updateChart(nextProps.flag, this.state.url, nextProps.beginDate, this.echartsReact.getEchartsInstance());
        return true;
    }


    componentDidMount() {
        let instance = this.echartsReact.getEchartsInstance();
        instance.setOption(this.state.option);
        this.updateChart(this.props.flag, this.state.url, this.props.beginDate, instance);
    }

    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={globalOption.options.modelOption} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}

class ElecPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            infoVisible: false,
            isDayVisible: false,
            isDayEnable: false,
            isMonthVisible: false,
            isMonthEnable: false,
            beginDate: "",
            flag: true,
            current: "1"
        }
    }

    onChange(date, dateString) {
        console.log(dateString);
        this.setState({
            beginDate: dateString,
            infoVisible: false
        });
    }


    dayHandleOk() {
        if (this.state.beginDate.length <= 0) {
            this.setState({
                infoVisible: true,
                isDayEnable: false
            });
        } else {
            this.setState({
                infoVisible: false,
                isDayEnable: true
            });
        }
    }
    dayHandleClose() {
        this.setState({
            isDayVisible: false,
            infoVisible: false,
            isDayEnable: false
        });
    }
    dayShowModal() {
        this.setState({
            isDayVisible: true,
        });
    }

    monthHandleOk() {
        if (this.state.beginDate.length <= 0) {
            this.setState({
                infoVisible: true,
                isMonthEnable: false
            });
        } else {
            this.setState({
                infoVisible: false,
                isMonthEnable: true
            });
        }
    }
    monthHandleClose() {
        this.setState({
            isMonthVisible: false,
            infoVisible: false,
            isMonthEnable: false,
        });
    }
    monthShowModal() {
        this.setState({
            isMonthVisible: true,
        });
    }

    render() {
        const { current } = this.state;
        console.log(current);
        return (
            <div className="my-lay-all page-home">
                {/* <nav className="page-nav">
                    <div className="left-btns">
                        <Button className="page-btn" ghost onClick={() => { this.setState({ flag: true }); }}>主井信息</Button>
                        <Button className="page-btn" ghost onClick={() => { this.setState({ flag: false }) }}>副井信息</Button>
                    </div>
                </nav> */}
                <Menu theme="dark" mode="horizontal" selectedKeys={[current]} className="page-nav">
                    <Menu.Item key="1" onClick={() => { this.setState({ flag: true, current: "1" }); }}>
                        主井信息
                    </Menu.Item>
                    <Menu.Item key="2" onClick={() => { this.setState({ flag: false, current: "2" }) }}>
                        副井信息
                    </Menu.Item>

                </Menu>
                <div className="page-context">
                    <div className="con-module">
                        <div className="c-m-main my-module-3">
                            <nav>
                                <div className="curve-link">当前电度统计</div>
                                <img src={moduleNavImg} alt=""></img>
                            </nav>
                            <div>
                                <NowElec flag={this.state.flag} />
                            </div>
                        </div>
                    </div>
                    <div className="con-module">
                        <div className="c-m-main my-module-3">
                            <nav>
                                <div className="curve-link">本日电度统计</div>
                                <img src={moduleNavImg} alt=""></img>
                            </nav>
                            <div>
                                <TodayElec flag={this.state.flag} />
                            </div>
                        </div>
                    </div>
                    <div className="con-module">
                        <div className="c-m-main my-module-3">
                            <nav>
                                <div className="curve-link">本月电度统计</div>
                                <img src={moduleNavImg} alt=""></img>
                            </nav>
                            <div>
                                <MonthElec option={globalOption.options.secPageOption} flag={this.state.flag} />
                            </div>
                        </div>
                    </div>
                </div>
                <nav className="page-nav">
                    <div className="right-btns">
                        <Button className="page-btn" ghost onClick={() => this.dayShowModal()}>按日查询</Button>

                        <Modal title="按日查询" visible={this.state.isDayVisible} width={800}
                            onCancel={() => this.dayHandleClose()}
                            footer={[
                                <Button key="submit" type="default" onClick={() => this.dayHandleClose()}>取消</Button>,
                                <Button key="submit" type="primary" onClick={() => this.dayHandleOk()}>查询</Button>
                            ]}
                        >
                            <span style={{ marginRight: 10 }}>请选择日期</span>
                            <DatePicker onChange={(date, dateString) => this.onChange(date, dateString)} />
                            {this.state.infoVisible ? <span style={{ marginLeft: 10 }}>请选择查询日期！</span> : <span />}
                            {this.state.isDayEnable ? <div className="modelChart"><DaySelect beginDate={this.state.beginDate} flag={this.state.flag} /></div> : <div />}
                        </Modal>

                        <Button className="page-btn" ghost onClick={() => this.monthShowModal()}>按月查询</Button>
                        <Modal title="按月查询" visible={this.state.isMonthVisible} width={800}
                            onCancel={() => this.monthHandleClose()}
                            footer={[
                                <Button key="submit" type="default" onClick={() => this.monthHandleClose()}>取消</Button>,
                                <Button key="submit" type="primary" onClick={() => this.monthHandleOk()}>查询</Button>
                            ]}
                        >
                            <span style={{ marginRight: 10 }}>请选择日期</span>
                            <DatePicker picker="month" onChange={(date, dateString) => this.onChange(date, dateString)} />
                            {this.state.infoVisible ? <span style={{ marginLeft: 10 }}>请选择查询日期！</span> : <span />}
                            {this.state.isMonthEnable ? <div className="modelChart"><MonthSelect beginDate={this.state.beginDate} flag={this.state.flag} /></div> : <div />}
                        </Modal>
                    </div>
                </nav>
            </div>
        );
    }
}

export default ElecPage;